<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <table border="1" width="400" align="center">
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </table>
</body>
<script>

    var table = document.querySelector("table");

    // 给父元素绑定点击事件
    table.onclick = function(eve){
        // 获取事件对象
        var e = eve || window.event;
        // 获取事件目标
        var target = e.target || e.srcElement;
        // 判断是否是td
        if(target.tagName === "TD"){
            // 创建输入框
            var ipt = document.createElement("input");
            // 将td的内容设置到输入框
            ipt.value = target.innerHTML;
            // 清空td
            target.innerHTML = "";
            // 将输入框插入到td
            target.appendChild(ipt);
            // 输入框失去焦点
            ipt.onblur = function(){
                // 将输入框的内容设置给td
                target.innerHTML = this.value;
            }
        }
    }



    
</script>
</html>